<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader :list="list" @cheked="cheked" @addition="add"/>
    <TodoMain :list="newList" @delete="del"/>
    <TodoFooter @delAdd="delFoot" @changeAdd=changeFoot :list="newList"/>
  </section>
</template>
<script>
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";

import "./styles/base.css"
import "./styles/index.css"
export default {
  data() {
    return {
      // 需求一:循环展示数据
      // 1.第一步将数据放入data中
      //2.子传父的方式，将数据放入props中
      //需求二:添加功能
      // 1.在输入框中输入内容，点击回车，将内容放入list中,并且清空输入框,改功能是子传父的方式
      // 需求三:删除功能
      // 1.点击删除按钮，将该条数据从list中删除,改功能是子传父的方式
      // 需求四:四底部统计
      // 1.统计数量,改功能是父传子的方式
      isALL:'all',
       list:JSON.parse(localStorage.getItem('list')) || [
        { id: 100, name: "吃饭", isDone: true },
        { id: 201, name: "睡觉", isDone: false },
        { id: 103, name: "打豆豆", isDone: true },
      ],
    }
  },
  methods: {
    add(name){
      this.list.push({
        id: Date.now()
        ,name
        , isDone: false})
    },
    del(index){
      this.list.splice(index, 1)
    },
    changeFoot(isALL){
      this.isALL = isALL
    },
    delFoot(){
    this.list =  this.list.filter(item=>!item.isDone)
    },
    cheked(val){
      this.list.forEach(item =>item.isDone=val );
    }
  },
   computed:{
    newList(){
     if(this.isALL === 'on'){
        return this.list.filter(item=>!item.isDone)
     }else if(this.isALL === 'yes'){
        return this.list.filter(item=>item.isDone)
    }else{
        return this.list
     }
  },

  },
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  watch:{
    list:{
      deep:true,
      handler(newVal){
        localStorage.setItem('list',JSON.stringify(newVal))
      }
    }
  }
};
</script>